<template>
    <div class="section-wrap breakStatus">
        <div class="form-section">
            <tab active-color='#2269ff'
                 v-if="departsir == '1'">
                <tab-item @on-item-click="$router.push('breakInput')">违章登记</tab-item>
                <tab-item @on-item-click="$router.push('breakList')">违章列表</tab-item>
                <tab-item selected
                          @on-item-click="$router.push('breakStatus')">违章统计</tab-item>
            </tab>
            <tab active-color='#2269ff'
                 v-else>
                <tab-item @on-item-click="$router.push('breakList')">违章列表</tab-item>
                <tab-item selected
                          @on-item-click="$router.push('breakStatus')">违章统计</tab-item>
            </tab>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位名称</label>
                </div>
                <group>
                    <div>
                        <div class="right-select"
                             @click="selectType">
                            <span>{{formData.departName?formData.departName:"请选择"}}</span>
                            <i class="iconfont icon-jinru rightmsg"></i>
                        </div>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>开始时间</label>
                </div>
                <group>
                    <div>
                        <datetime format="YYYY-MM-DD"
                                  v-model="formData.startTime"></datetime>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>结束时间</label>
                </div>
                <group>
                    <div>
                        <datetime format="YYYY-MM-DD"
                                  v-model="formData.endTime"></datetime>
                    </div>
                </group>
            </div>
            <p class="search-btn"
               @click="submit">查询</p>
            <div class="total">
                违章总数量: {{listAllCount}}
            </div>
            <no-data v-if="acceptList.length==0 && flag"></no-data>
            <dl v-for="(item,index) in acceptList"
                :key="index">
                <dt>{{item.DeptName}}</dt>
                <ul>
                    <li v-for="(item2,index) in item.Items"
                        :key="index">
                        <p>{{item2.ItemCount}}</p>
                        {{item2.ItemName}}
                    </li>
                </ul>
            </dl>
        </div>
        <myMenu></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     business="GetHdProjectsAndFb"></companyProp>
    </div>

</template>

<script>
import { Tab, TabItem, PopupRadio, Datetime } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import { breakStatis } from '@/api/api'
import noData from '@/commonComponents/noData/noData.vue'
import companyProp from '@/commonComponents/companyProp'
export default {
    name: 'App',
    data () {
        return {
            departsir: '',
            formData: {},
            flag: false,
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            acceptList: [], // 列表数据
            listCount: 0, // 当前页列表条数
            listAllCount: 0, // 列表总数
            param: {
                allowPaging: true,
                data: {
                    from: '',
                    to: '',
                    deptId: '930732390',
                    type: '违章类型'
                }
            },
            companyPropShow: false // 选择单位弹框
        }
    },
    components: {
        VueBetterScroll,
        Tab,
        TabItem,
        noData,
        PopupRadio,
        Datetime,
        myMenu,
        companyProp
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.formData.departID = userInfo.deptid
        this.departsir = userInfo.departsir
        this.formData.startTime = this.getdatestr()
        this.formData.endTime = this.getdatenew()
        this.getData()
        if (this.$store.state.checkcompany.sourceType !== 'breakStatus') {
            this.$store.state.checkcompany = {}
        }
        if (localStorage.getItem('statisSearch')) {
            this.formData = JSON.parse(localStorage.getItem('statisSearch'))
            localStorage.removeItem('listSearch')
            // this.formData.departID = this.$store.state.checkcompany.deptId
            // this.formData.departName = this.$store.state.checkcompany.deptName
        }
        this.formData.departID = this.$store.state.checkcompany.deptId ? this.$store.state.checkcompany.deptId : userInfo.deptid
        this.formData.departName = this.$store.state.checkcompany.deptName ? this.$store.state.checkcompany.deptName : userInfo.deptname
    },
    methods: {
        getData () {
            this.param.data.from = this.formData.startTime
            this.param.data.to = this.formData.endTime
            this.param.data.deptId = this.formData.departID
            breakStatis(this.param).then((res) => {
                if (res.code === 0) {
                    this.acceptList = res.data
                    this.listCount = this.acceptList.length
                    this.listAllCount = res.count
                }
            }).catch(() => {
                console.log('error')
            }).finally(() => {
                this.$vux.loading.hide()
                this.flag = true
            })
        },
        selectType () {
            // localStorage.setItem('statisSearch', JSON.stringify(this.formData))
            // this.$router.push({ path: '/addCompany3', query: { sourceType: 'breakStatus' } })
            this.companyPropShow = true
        },
        getdatestr () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            var currentdate = year + seperator1 + month + seperator1 + '01'
            return currentdate
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        onPullingDown () {
            console.log('xl')
        },

        onPullingUp () {
            this.param.pageIndex++
            breakStatis(this.param).then((res) => {
                if (res.code === 0) {
                    this.acceptList = this.acceptList.concat(res.data)
                    this.listCount = this.acceptList.length
                    this.listAllCount = res.count
                    if (this.listCount < this.listAllCount) {
                        this.$refs[`scrollqq`].forceUpdate(true)
                    } else {
                        this.$refs[`scrollqq`].forceUpdate(false)
                    }
                }
            }).catch(() => {
                console.log('error')
            }).finally(() => {
                this.$vux.loading.hide()
                this.flag = true
            })
        },
        onClick () {
            this.param.data.name = this.name
            this.getData()
        },
        submit () {
            this.param.pageIndex = 0
            if (this.brokenRuleType) {
                this.formData.brokenRuleType = this.brokenRuleType[0]
            }
            this.getData()
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.formData.departName = item.Name
            this.formData.departID = item.Id
        }
    }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.form-section {
    // position: fixed;
    // top: 0px;
    // width: 100%;
    // height: 100%;
    // left: 0;
    // overflow: scroll;
    // bottom: 100px;
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
    .total {
        line-height: 40px;
        font-size: 12px;
        color: #9e9fa1;
        text-align: right;
        padding-right: 20px;
        background: #ebeef3;
    }
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 23px auto;
        text-align: center;
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 8;
    }
    dl {
        height: 105px;
        border-bottom: 1px solid #f0f0f2;
        font-size: 14px;
        margin-left: 20px;
        overflow: hidden;
        // background: url(../../../../static/images/index/more3.png) no-repeat
        //     right 20px center;
        // background-size: 6px 10px;
        position: relative;
        dt {
            width: 300px;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #2b6cfc;
            font-weight: bold;
            margin: 15px 0 13px 0;
        }
        ul {
            display: flex;
            padding-bottom: 20px;
            border-bottom: 4px solid #ebeef3;
            li {
                flex: 1;
                text-align: center;
                float: left;
                > p {
                    font-weight: bold;
                    font-size: 20px;
                    margin-bottom: 10px;
                    color: #2b6cfc;
                    border-right: 1px solid #efeef3;
                }
            }
        }
    }
}

.right-select {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    padding-right: 0px;
    margin-right: -3px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
}
.right-select span {
    color: #999;
    font-size: 14px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-jinru {
    color: #c8c8cd;
}
.form-section li {
    border-bottom: none;
}
.form-section ul {
    padding-left: 0;
}
</style>
<style>
.breakStatus .pullup-wrapper {
    position: relative;
    z-index: 1;
}
</style>
